<template>
	<div>
		<el-dialog :title="title" :visible.sync="dialogTableVisible">
			<div class="addlink">
				<div class="al_label fl">权限点名称</div>
				<div class="al_input">
					<el-input placeholder="请输入内容"></el-input>
				</div>
			</div>
			<div class="addlink">
				<div class="al_label fl">菜单</div>
				<div class="al_input">
					<el-tree
						:props="tree"
						:load="loadNode"
						lazy
						highlight-current
						@node-click="treeClick">
					</el-tree>
				</div>
			</div>
		    <div slot="footer" class="dialog-footer">
		      <el-button @click="dialogTableVisible = false">取 消</el-button>
		      <el-button type="primary" v-if="openType == 'add' || 'edit'" @click="dialogTableVisible = false">确 定</el-button>
		    </div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props:{
			openType:{
				type:String
			}
		},
		watch:{
			openType (val) {
				if(val == "add"){
					this.title = "添加权限点";
				}else if(val == "edit"){
					this.title = "编辑权限点";
				}else if(val == "look"){
					this.title = "查看权限点";
				}
			}
		},
		data () {
			return {
				tree: {
					label: 'text',
					children: 'ChildNodes',
					isLeaf:'isLeaf'
				},
				title:"",
				form: {
				  name: '',
				  checkList: []
				},
				dialogTableVisible:false
			}
		},
		methods:{
			treeClick(node){
				this.classname=node.text;
				if(node.isLeaf){
					this.classid=node.id;
					this.keyword = "";
				}
			},
			show () {
				this.dialogTableVisible = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addlink{
		
	}
	.al_label{
		width:100px;
		text-align:right;
		line-height:40px;
	}
	.al_input{
		margin-left:110px;
	}
</style>
